<template>
  <div id="GetIngLatMapContainer" class="GetIngLatMap-container"></div>
</template>

<script>
import * as AMapLoader from "@amap/amap-jsapi-loader";
export default {
  data() {
    return {
      //地图对象
      map: null,
    };
  },
  props: {
    visible: Boolean,
  },
  watch: {},
  created() {},
  mounted() {
    this.createMap();
  },
  methods: {
    /**
     * 创建地图
     */
    createMap() {
      const self = this;
      AMapLoader.load({
        key: "6027cc22082e43c4862d5466bb343740", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        AMapUI: {
          // 是否加载 AMapUI，缺省不加载
          version: "1.1", // AMapUI 缺省 1.1
          plugins: [], // 需要加载的 AMapUI ui插件
        },
        Loca: {
          // 是否加载 Loca， 缺省不加载
          version: "1.3.2", // Loca 版本，缺省 1.3.2
        },
      })
        .then((AMap) => {
          this.map = new AMap.Map("GetIngLatMapContainer", {
            //pitch: 60, // 地图俯仰角度，有效范围 0 度- 83 度
            //viewMode: '3D' // 地图模式
          });
          this.map.setMapStyle("amap://styles/fresh");

          this.map.on("click", function (e) {
            let text = e.lnglat.getLng() + "," + e.lnglat.getLat();
            self.$emit('getinglat',text);
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style lang="scss">
.GetIngLatMap-container {
  height: 400px;
}
</style>